*{margin:0;padding:0;}
body{background:#efefef;color:black;}
ul,ol{list-style: none;}
h1,h2{font-weight: bold;}
a{text-decoration:none;}
.clearfix::after{content:'';display:block;clear:both;}

[data-x].offset{
  transform: translateY(100px);
}
[data-x]{
transform: translateY(0);
transition: all 0.5s;
}
@keyframes slideUp{
    0%{transform: translateY(-30px);}
    100%{transform: translateY(0);}
}
.topNavBar{padding:20px 16px;position: fixed;top:0;left:0;width:100%; color:#9A9DA2;transition: all 0.5s;}
.topNavBar.sticky{color: black;background: white; padding: 10px 16px; z-index: 1; box-shadow: 0 0 6px rgba(0,0,0,0.25);}
.topNavBar-inner{padding:0 16px;}

.topNavBar .logo{font-family:"Arial Black";font-size:24px;padding-top:1px;}
.topNavBar .logo .rs{color:#e6686a;margin-right:4px;}
.topNavBar .logo .card{color:#9A9DA2;}

.topNavBar nav{font-size:13px;padding-top:8px;padding-bottom:8px;}
.topNavBar nav a{color:inherit;  /*继承上一级颜色*/text-decoration:none;font-weight:bold;}
.topNavBar nav ul{padding:0;margin:0;}
.topNavBar nav ul>li{float:left;margin: 5px 17px;position: relative;}
.topNavBar nav ul>li>a{ padding-bottom:5px; position: relative;}
.topNavBar nav ul>li.active > a::after,
.topNavBar nav ul>li.highlight> a::after{
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #DC6465;
    height: 3px;
    animation: menuSlide 0.3s;
}
@keyframes menuSlide{
    0%{width: 0;}
    100%{width: 100%;}
}
.topNavBar .submenu{
    display: none;
    position: absolute;
    top: 150%;
    right: 0;
    color: #3d4451;
    background: white;
}
.topNavBar li.active > .submenu{
    display: block;
    animation: submenuSlide 0.3s;
    box-shadow: 0 0 6px rgba(0,0,0,0.25);

}
@keyframes submenuSlide{
    0%{margin-right: 100%; } /*依据父元素的100%*/
    100%{margin-right: 0;}
}
.topNavBar .submenu > li{white-space: nowrap;  /*不换行*/padding: 5px 10px;background-color: white;}
.button{color:inherit;}

.banner{background-image:url(../img/wallhaven-oxj7mm.jpg); height:520px; background-size:cover; background-position: center center;}
.banner .mask{background-color: rgba(0,0,0,0.4); height:520px;}

.usercard{ margin-left: auto;margin-right: auto;background-color: #ffffff;max-width: 940px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);}
.usercard .pictureAndText{padding:50px;}
.usercard .picture{width:300px; height:350px; float: left;}
.usercard .text{float: right; margin-left:65px; width:50%;}
.usercard .welcome{background-color: #e6686a; color:#ffffff; padding:4px 16px; margin-bottom: 30px; position: relative; line-height: 20px;
    display: inline-block;}
.usercard .welcome .triangle{border:10px solid transparent;border-left-color:#e6686a; width:0; border-top-width: 0; position: absolute;
    top:100%;left:6px;}
.usercard .text hr{ margin:20px 0; border:none; border-top:1px solid#efefef;}
.usercard dl dt{ float: left;font-weight: bold; padding:5px 0; width:30%;}
.usercard dl dd{ float: left; width:70%; color:#aaa0a7; padding:5px 0;}

.media{background-color: #e6686a;text-align: center;}

.usercard svg{width:30px; height:30px; fill:white; vertical-align:top;}
.usercard .media>a{display: inline-block;border-radius: 50%; line-height: 30px; margin:16px; width:40px;padding:5px 0;}
.usercard .media>a:hover{background:#cf5d5f;}
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

main .button{border:1px solid #cdcfd1; font-size: 14px; font-weight: bold; text-align: center; margin: 32px auto; padding:21px 45px;
    display: block;width:100px;color:#3d4451;    transition: box-shadow 0.3s;}
main .button:hover{box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.2);}
main>p{ width:940px; font-size: 18px; line-height: 1.8; text-align: center; margin:20px auto;}

section.skills, 
section.portfolio{ max-width: 940px;margin:60px auto;/* margin-top:60px; */}
section.portfolio{text-align: center;}
section.skills>h2,
section.message>h2,
section.portfolio>h2{text-align: center;font-size: 34px;color:#3d4451;}

section.skills>ol{background:white;height:245px;max-width: 940px;box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);padding:42px 50px;
    box-sizing: border-box; margin-top:30px;}
section.skills>ol>li{float:left;width:48%;}
section.skills>ol>li>h3{font-weight: normal;line-height: 1.1;font-size: 15px;}
section.skills>ol>li:nth-child(even){float:right;margin-left: 10px;}
section>ol>li .progressBar{background:#fae1e1;border-radius: 5px; margin:5px auto 40px; height: 5px;overflow: hidden;}
section .progressBar .progress{ background: #e6686a; height:100%; width:70%; border-radius:5px;transform: translateX(0);transition: all 1s;}
section.skills.offset .progress{transform: translateX(-100%);}   /*技能条滚动*/

section.portfolio .swiper-container {
    max-width: 736px;      /*533+203px*/
    height: 400px;
    background-color: white;
    margin-top: 30px;
}
section.portfolio .swiper-container .swiper-wrapper .swiper-slide>a{width: 533px;height: 400px;}

section.portfolio .swiper-wrapper .swiper-slide{display:flex;}
section.portfolio .swiper-wrapper .swiper-slide>p{margin: auto;padding: 10px 30px;}
section.portfolio .swiper-container .hide{opacity:0;}
section.portfolio .swiper-button-next,.swiper-button-prev{transition:opacity 0.5s;}
section.portfolio .swiper-button-next::after,
section.portfolio .swiper-button-prev::after{font-size: 30px;}



section div.works{height:597px;margin-top: 30px;position: relative;}
section div.works .big,
section div.works .small{position: absolute;}
section div.works .small{ right:0;}
section div.works .small:nth-child(3){ top:308px;}


section.message{
    max-width: 736px;
    margin: 30px auto;
}
section.message>ol{
    border-top: 1px solid #ddd;
    margin-top: 40px;
    margin-bottom: 40px;
}
section.message>ol>li{
    padding: 16px;
    border-bottom:1px solid #ddd;
}
section.message>form{
    max-width: 736px;
    margin: auto;
    text-align: end;
}
section.message>form>.name,
section.message>form>.content{
    border: 0.8px solid;
    border-radius: 5px;
    padding: 9px 10px;
    color:gray;
    line-height: 1.5;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition:border 0.3s;
}
section.message>form>.name{
    width: 25%;
}
section.message>form>.content{
    width: 60%;
}
section.message>form>.name:focus,
section.message>form>.content:focus{
    border: 0.8px solid rgb(90, 90, 241);
    outline: none;
}
section.message>form>.name:hover,
section.message>form>.content:hover{
    border: 0.8px solid rgb(90, 90, 241);
}
section.message>form>.submit{
   padding: 9px 30px;
   border-radius: 5px;
   background-color: indianred;
   border: none;
   line-height: 1.5;
   color: white;
   transition:all 0.3s;
}
section.message>form>.submit:focus{
    border: none;
    outline: none;
}
section.message>form>.submit:hover{
    background: #e6686a;
}
.wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}
.wrapper p{
    margin-top: 15px;
}
.wrapper .arrow>img{
  width: 20px;
  height: 20px;
  padding-top: 20px;
}
.demo{width: 533px;height: 400px;}